<template>
  <BasicModal
    v-bind="$attrs"
    @register="register"
    :title="'获取Amazon产品 | 分类-' + category_name"
    @visible-change="handleVisibleChange"
    @ok="confirm_get"
  >
    <div class="pt-3px pr-3px">
      <BasicForm @register="registerForm" :model="modelRef" />
    </div>
  </BasicModal>
</template>
<script lang="ts" setup>
  import { ref, nextTick, reactive, h } from 'vue'
  import { BasicModal, useModalInner } from '/@/components/Modal'
  import { BasicForm, FormSchema, useForm } from '/@/components/Form'
  import { Input } from 'ant-design-vue'
  import { getCategoryProduct } from '/@/api/demo/category'
  import { useMessage } from '/@/hooks/web/useMessage'

  const schemas: FormSchema[] = [
    {
      field: 'numbers',
      component: 'InputNumber',
      label: '获取条数',
      required: true,
      colProps: {
        span: 24,
      },
    },
    {
      field: 'sales_rank_low',
      component: 'InputNumber',
      label: '最低排名',
      required: true,
      colProps: {
        span: 24,
      },
    },
    {
      field: 'sales_rank_high',
      component: 'InputNumber',
      label: '最高排名',
      required: true,
      colProps: {
        span: 24,
      },
    },
    {
      field: 'update_time',
      component: 'RangePicker',
      required: true,
      label: '更新时间',
      colProps: { span: 24 },
      componentProps: {
        getPopupContainer: () => {
          return document.querySelector('.ant-form')!
        },
      },
    },
  ]

  const props = defineProps({
    userData: { type: Object },
  })
  const { createMessage } = useMessage()
  const modelRef = ref({})
  const category_name = ref({})
  const catId = ref({})
  const domainId = ref({})
  const catName = ref({})
  const [registerForm, { getFieldsValue, resetFields, validateFields }] = useForm({
    labelWidth: 110,
    schemas,
    showActionButtonGroup: false,
    actionColOptions: {
      span: 24,
    },
  })

  async function validateForm() {
    try {
      await validateFields()
      return true
    } catch (error) {
      return false
    }
  }
  async function resetValidate() {
    clearValidate()
  }

  const [register, { closeModal, changeOkLoading, changeLoading }] = useModalInner((data) => {
    data && onDataReceive(data)
  })

  function onDataReceive(data) {
    category_name.value = data.category_name
    catId.value = data.catId
    domainId.value = data.domainId
    catName.value = data.catName
  }

  function openLoading(absolute: boolean) {
    compState.absolute = absolute
    compState.loading = true
  }

  async function confirm_get() {
    validateForm()
      .then((result) => {
        if (result) {
          changeLoading(true)
          changeOkLoading(true)

          var form_data = getFieldsValue()
          form_data.catId = catId.value
          form_data.domainId = domainId.value
          form_data.catName = catName.value

          getCategoryProduct(form_data).then(
            (res) => {
              createMessage.success('获取成功！')
              changeLoading(false)
              changeOkLoading(false)
              setTimeout(function () {
                closeModal()
              }, 500)
            },
            (error) => {
              changeLoading(false)
              changeOkLoading(false)
              console.log(error)
            },
          )
        }
      })
      .catch((error) => {
        createMessage.error(error)
      })
  }

  function handleVisibleChange(v) {
    v && props.userData && nextTick(() => onDataReceive(props.userData))
    setTimeout(function () {
      resetFields()
    }, 100)
  }
</script>
